/**
 * 标的占比
 */
import React  from 'react'
import style from './index.less'
import { IECharts} from '../../../../../components'

const TargetRatio=({
	dispatch,
	date,
	fundId,
	data,
	location:{
		pathname,
		query
	},
	tag
	})=>{
		const myData=data.map((item, i)=>({
			name:item.stockCode,
			value:item.percent
		}))
		const myProps= {
	    onEvents:{
				click:function(params){
					const timestamp=Date.parse(new Date())/1000
					dispatch({
						type: `${tag}/changeRouter`,
						payload:{
							pathname:`${pathname}Target`,
							query:{
								from:'dailysummary',
								date:query.date||date,
								fundId,
								stockCode:params.name,
								at:timestamp
							}
						}
					})
				}
			},
			option:{
				color:['#ff8f00','#de7aef','#cddc39','#56a7e8','#4fc3d2','#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
				tooltip: {
					trigger: 'item',
					formatter: "{b} : {c} ({d}%)"
				},
				legend: {
					orient: 'vertical',
					right: "10%",
					top: 'center',
					data: myData.map((item, i) => item.name),
					itemWidth:5,
					itemHeight:5
				},
				series: [
					{
						type: 'pie',
						radius: '70%',
						center: [
							'30%', '50%'
						],
						label: {
							normal: {
								show: false
							}
						},
						data: myData,
						itemStyle: {
							emphasis: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}
				]
			}
	  }

	return (
		<div className={`chart pie ${style.pie}`}>
			<IECharts {...myProps} resizable={true}/>
		</div>
	)

}

TargetRatio.propTypes={
	// dispatch,
	// date,
	// fundId,
	// data,
	// location,
	// tag
}

export default TargetRatio
